<template>
  <p>Timmy-Card 是一个通用的卡片组件，包含图片区域、内容摘要区域和自定义底部区域。</p>
  <div style="display: flex; gap: 10px;">
    <Timmy-Button>预览使用文档</Timmy-Button>
    <Timmy-Button type="warning">bug反馈</Timmy-Button>
  </div>
  <h1 class="row-title">第一组</h1>
  <div class="row">
    <!-- 卡片一 -->
    <Timmy-Card img-src="/kaola.jpg" summary="考拉（Koala），学名 Phascolarctos cinereus，是澳大利亚特有的有袋类动物，属于 树袋熊科。它们以憨态可掬的外表和慵懒的生活方式闻名，被誉为“世界上最可爱的动物之一”。" />
    <!-- 卡片二 -->
    <Timmy-Card img-src="/kaola.jpg" summary="考拉（Koala），学名 Phascolarctos cinereus，是澳大利亚特有的有袋类动物，属于 树袋熊科。它们以憨态可掬的外表和慵懒的生活方式闻名，被誉为“世界上最可爱的动物之一”。" >
      <!-- 插槽内部的内容样式由用户自己决定 -->
      <template #footer>
        <div class="footer">
          <div class="level">动物 · 考拉</div>
          <div class="price">Koala</div>
        </div>
      </template>
    </Timmy-Card>
  </div>
  <h1 class="row-title">第二组</h1>
  <div class="row">
    <Timmy-Card img-src="/kaola.jpg" :width="368" :img-height="90">
      <div>考拉（Koala），学名 Phascolarctos cinereus，是澳大利亚特有的有袋类动物，属于 树袋熊科。它们以憨态可掬的外表和慵懒的生活方式闻名，被誉为“世界上最可爱的动物之一”。</div>
      <!-- 插槽内部的内容样式由用户自己决定 -->
      <template #footer>
        <div class="footer-java">
          <div class="level">动物 · 考拉</div>
          <div class="level"> （Koala） </div>
        </div>
      </template>
    </Timmy-Card>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.footer {
  padding: 0 8px;
  font-size: 12px;
  text-align: left;
}
.level {
  color: #9199a1;
  margin-bottom: 8px;
}

.price {
  color: #f01414;
}

.footer-java {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 0 8px;
}
</style>
